<template>
  <ion-page>
    <ion-header>
      <ion-toolbar color="light" class="pub-hearder">
        <ion-buttons slot="start">
          <ion-back-button text=""></ion-back-button>
        </ion-buttons>
        <ion-title>
            乐理
          </ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <div class="main-page">
        <img src="@/assets/images/yl.png" alt="" />
        <div class="list" v-for="(item, index) of listData" :key="index" @click="listChange(index)">
            <div class="title">
                <img :src="require(listIndex === index ? '@/assets/images/up.png' : '@/assets/images/down.png')" alt=""> {{ item.title }} <span v-if="item.ismian === 1">限免</span> <ion-icon v-else :icon="bagHandleOutline"></ion-icon>
            </div>
            <p>已练 {{ item.num }}/{{ item.total }}</p>
            <ion-icon class="chevronForwardOutline" :icon="chevronForwardOutline"></ion-icon>
            <!-- v-if="listIndex === index" -->
            <div v-if="listIndex === index">
              <div class="childlist"  v-for="(item1, index1) of item.children" :key="index1">
                <div class="title">
                    {{ item1.title }} <span v-if="item1.ismian === 1">限免</span> <ion-icon v-else :icon="bagHandleOutline"></ion-icon>
                </div>
                <p>已练 {{ item1.num }}/{{ item1  .total }}</p>
                <ion-icon class="chevronForwardOutline" :icon="chevronForwardOutline"></ion-icon>
              </div>
            </div>
        </div>
      </div> 
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonPage, IonContent, IonTitle, IonHeader, IonToolbar, IonButtons, IonBackButton } from '@ionic/vue';
import { chevronForwardOutline, bagHandleOutline } from 'ionicons/icons';
import { reactive, toRefs, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { PublicService } from '@/utils/public';
const publicService = new PublicService();
export default {
  name: 'login-page',
  components: {
    IonPage, IonContent, IonHeader, IonToolbar, IonButtons, IonBackButton,  IonTitle
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    let t: any;
    const state = reactive({
      listData: [
        {
            title: '第一章 乐理基础乐理基础',
            total: '20',
            num: 0,
            ismian: 1,
            children: [
                {
                    title: '1.1  乐理基础乐理基础',
                    total: '20',
                    num: 0,
                    ismian: 1,
                },
                {
                    title: '1.1  乐理基础乐理基础',
                    total: '20',
                    num: 0,
                    ismian: 1,
                }
            ],
        },
        {
            title: '第二章 乐理基础乐理基础',
            total: '20',
            num: 0,
            ismian:0,
            children: [
                {
                    title: '1.1  乐理基础乐理基础',
                    total: '20',
                    num: 0,
                    ismian: 0,
                },
                {
                    title: '1.1  乐理基础乐理基础',
                    total: '20',
                    num: 0,
                    ismian: 0,
                }
            ],
        }
      ],
      listIndex: -1,
    })

    function listChange(index: number){
      if(state.listIndex !== index){
        state.listIndex = index;
      } else {
        state.listIndex = -1;
      }
    }

   


    return {
      ...toRefs(state),
      bagHandleOutline,
      chevronForwardOutline,
      listChange
    }
  }
}
</script>
<style lang="scss" scoped>
.main-page {
    padding: 10px;
    background: #fff;
    .list{
      position: relative;
      margin-top: 10px;
      .chevronForwardOutline{
          position: absolute;
          right: 10px;
          top: 15px;
          color: #999;
        }
      .title{
        font-size: 16px;
        color: #333333;
        font-weight: bold;
        padding-right: 20px;
        margin-bottom: 5px;
        span{
          color: #CA3032;
          font-size: 12px;
          padding: 3px 5px;
          background: rgba(202, 48, 50, 0.1);
          border-radius: 2px;
          margin-left: 5px;
        }
        ion-icon{
          font-size: 16px;
        }
        img{
          width: 20px;
          vertical-align: middle;
          margin-right: 10px;
        }
      }
      p{
        margin: 0px;
        margin-left: 35px;
        font-size: 12px;
        color: #999999;
        margin-bottom: 20px;
      }
      .childlist{
        position: relative;
        .title{
          font-size: 14px;
          padding-left: 35px;
          font-weight: normal;
        }
      }
    }
}
</style>